<template>
    <div>
        <Form ref="form" :model="data" :rules="rules"  class="ivu-mt" :label-width="labelWidth" :label-position="labelPosition">
            <Card :bordered="false" dis-hover title="基本信息" class="ivu-mt">
               <!-- //第1行-->
                <Row>
                    <Col span="12" >
                        <FormItem label="姓名：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.contractId" placeholder="请输入姓名" element-id="contractId" />
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="手机号：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.contractId" placeholder="请输入手机号" element-id="contractId" />
                        </FormItem>
                    </Col>
                </Row>
               <!-- //第2行-->
                <Row>
                    <Col span="12" >
                        <FormItem label="账号：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.contractId" placeholder="默认为手机号" element-id="contractId" />
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="密码：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.contractId" placeholder="请输入密码" element-id="contractId" />
                        </FormItem>
                    </Col>
                </Row>
               <!-- //第3行-->
                <Row>
                    <!--性别-->
                    <Col span="12" >
                        <FormItem label="性别：" :rop="trafficType" label-for="trafficType">
                            <Radio-group :model.sync="male">
                                <Radio value="男">男</Radio>
                                <Radio value="女">女</Radio>
                            </Radio-group>
                        </FormItem>
                    </Col>
                   <!-- 出生日期-->
                    <Col span="12" >
                        <FormItem label="出生日期：" :rop="trafficType" label-for="trafficType">
                            <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
                        </FormItem>

                    </Col>
                </Row>
                <!-- //第4行-->
                <Row>
                    <Col span="12" >
                        <FormItem label="身份证号码：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.contractId" placeholder="请输入身份证号码" element-id="contractId" />
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="所属机构：" :rop="trafficType" label-for="trafficType">
                            <Select v-model="data.trafficType" placeholder="请选择" element-id="trafficType">
                                <Option value="train">1 </Option>
                                <Option value="plane">2</Option>
                            </Select>
                        </FormItem>

                    </Col>
                </Row>
                <!-- //第5行-->
                <Row>
                    <Col span="12" >
                        <FormItem label="职务：" :rop="trafficType" label-for="trafficType">
                            <Select v-model="data.trafficType" placeholder="请选择" element-id="trafficType">
                                <Option value="train">1 </Option>
                                <Option value="plane">2</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="角色：" :rop="trafficType" label-for="trafficType">
                            <Select v-model="data.trafficType" placeholder="请选择" element-id="trafficType">
                                <Option value="train">1 </Option>
                                <Option value="plane">2</Option>
                            </Select>
                        </FormItem>

                    </Col>
                </Row>
                <!-- //第6行-->
                <Row>
                    <Col span="12" >
                        <FormItem label="照片：" :rop="trafficType" label-for="trafficType">
                            <Select v-model="data.trafficType" placeholder="请选择" element-id="trafficType">
                                <Option value="train">1 </Option>
                                <Option value="plane">2</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="状态：" :rop="trafficType" label-for="trafficType">
                            <Select v-model="data.trafficType" placeholder="请选择" element-id="trafficType">
                                <Option value="train">1 </Option>
                                <Option value="plane">2</Option>
                            </Select>
                        </FormItem>

                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <FormItem label="描述：" :rop="trafficType" label-for="trafficType">
                            <Input v-model="data.text" type="textarea" :rows="4" placeholder="请输入内容" />
                        </FormItem>
                    </Col>
                </Row>
                  <Row>
                      <Col v-bind="grid" class="ivu-text-right">
                          <FormItem>
                              <Button class="ivu-ml" @click="handleReset(data)">取消</Button>
                              <Button type="primary" :loading="loading" @click="handleSubmit">提交</Button>
                          </FormItem>
                      </col>
                  </Row>
            </Card>
        </Form>
    </div>
</template>

<script>
	export default {
		data(){
			return{
				grid: {
					xl: 12,
					lg: 12,
					md: 12,
					sm: 24,
					xs: 24
				},
				trafficType:'',
				formItem: {
					checkbox: [],
				},
                male:'',
				data: {
					tripReason: '',
					contractId: '',
					tripTime: [],
					approve: '',
					emergencyType: 3,
					fromCity: '',
					goTime: '',
					backTime: '',
					trafficType: '',
					toCity: '',
					name: ''
				},
				rules: {
					tripReason: [
						{ required: true, message: '请填写出差事由', trigger: 'blur' }
					],
					contractId: [
						{ required: true, message: '请填写合同编号', trigger: 'blur' }
					],
					tripTime: [
						{
							required: true,
							type: 'array',
							message: '请选择出差时间',
							trigger: 'change',
							fields: {
								0: {
									type: 'date',
									message: '请选择出差时间'
								},
								1: {
									type: 'date',
									message: '请选择出差时间'
								}
							}
						}
					],
					approve: [
						{ required: true, message: '请选择审批人', trigger: 'change' }
					],
					fromCity: [
						{ required: true, message: '请选择出发城市', trigger: 'change' }
					],
					goTime: [
						{ required: true, type: 'date', message: '请选择出发时间', trigger: 'change' }
					],
					backTime: [
						{ required: true, type: 'date', message: '请选择返程时间', trigger: 'change' }
					],
					trafficType: [
						{ required: true, message: '请选择交通类型', trigger: 'change' }
					]
				},
				toCityRule: [
					{ required: true, message: '请选择到达城市', trigger: 'change' }
				],
				loading: false
            }
        },
		computed:{
			labelWidth () {
				return this.isMobile ? undefined : 100;
			},
			labelPosition () {
				return this.isMobile ? 'top' : 'left';
			}
		},
        methods:{
	        handleSubmit () {
		        this.$refs.form.validate((valid) => {
			        this.loading = true;
			        if (valid) {
				        setTimeout(() => {
					        this.$Message.success('出差申请提交成功!');
					        this.loading = false;
				        }, 2000);
			        } else {
				        this.loading = false;
			        }
		        });
	        },
	        handleReset (name) {
		        // this.$refs[name].resetFields();\
		        this.$router.push('/dangerpool/listingSupervision')
	        }

        },
        created() {
	        let baceData = this.$route.params.item;
	        let myIndex = this.$route.params.index;
	        //判断是否编辑渲染
	        if (myIndex){
	        	this.data.name = baceData.name;
	        	this.data.type = baceData.dangerLevel;
	        	this.data.description = baceData.name;
            }else {
	        	// alert('不进行编辑')
            }
        }
	}
</script>

<style scoped>

</style>
